<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎来到华成保险代理公司</title>

    <!-- <link rel="stylesheet" type="text/css" href="/css/login-styles.css"> -->

</head>
<style type="text/css">
    /*    html body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', 'Microsoft YaHei';
            font-size: 1em;
            font-weight: normal;
            box-sizing: border-box;
        }

        body ::-webkit-input-placeholder {
            font-family: 'Microsoft YaHei', 'Microsoft YaHei';
            color: white;
            font-weight: normal;
        }

        body :-moz-placeholder {
            font-family: 'Microsoft YaHei', 'Microsoft YaHei';
            color: white;
            font-weight: normal;
        }

        body ::-moz-placeholder {
            font-family: 'Microsoft YaHei', 'Microsoft YaHei';
            color: white;
            font-weight: normal;
        }

        .login-container {
            width: 100%;
            height: 400px;
            background: #FF9933;
            background: -webkit-linear-gradient(left top, #ec6363 -5%, #FF9933 100%);
            background: -moz-linear-gradient(left top, #ec6363 -5%, #FF9933 100%);
            opacity: 0.8;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .login-content {
            position: absolute;
            z-index: 2;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            height: 100%;
            width: auto;
            text-align: center;
            overflow: hidden;
        }

        .login-welcome {
            font-size: 2.5em;
            color: #fff;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-timing-function: ease-in-put;
            transition-timing-function: ease-in-put;
            font-weight: normal;
            padding: 15px;
        }

        .login-form {
        }

        .login-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            outline: 0;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background-color: rgba(255, 255, 255, 0.2);
            width: 280px;
            border-radius: 3px;
            padding: 10px 15px;
            margin: 0 auto 10px auto;
            display: block;
            text-align: center;
            font-size: 1.1em;
            color: white;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
            font-weight: normal;
        }

        .login-input:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        .login-input:focus {
            background-color: white;
            width: 310px;
            color: #f59075;
        }

        .login-submit {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            background-color: white;
            border: 0;
            padding: 10px 15px;
            color: #f59075;
            border-radius: 3px;
            margin: 0 auto 10px auto;
            width: 280px;
            display: block;
            cursor: pointer;
            font-size: 1.1em;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
        }

        .login-submit:hover {
            background-color: #f5f7f9;
        }

        .login-submit:focus ~ .to-be-changed {
            color: red;
        }

        .login-cover {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .login-cover li {
            position: absolute;
            list-style: none;
            display: block;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.15);
            bottom: -160px;
            -webkit-animation: square 25s infinite;
            animation: square 25s infinite;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
        }

        .login-cover li:nth-child(1) {
            left: 10%;
        }

        .login-cover li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 17s;
            animation-duration: 17s;
        }

        .login-cover li:nth-child(3) {
            left: 25%;
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
        }

        .login-cover li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            -webkit-animation-duration: 22s;
            animation-duration: 22s;
            background-color: rgba(255, 255, 255, 0.25);
        }

        .login-cover li:nth-child(5) {
            left: 70%;
        }

        .login-cover li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
            background-color: rgba(255, 255, 255, 0.2);
        }

        .login-cover li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            -webkit-animation-delay: 7s;
            animation-delay: 7s;
        }

        .login-cover li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            -webkit-animation-delay: 15s;
            animation-delay: 15s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
        }

        .login-cover li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .login-cover li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            -webkit-animation-delay: 11s;
            animation-delay: 11s;
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
            }
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
            }
        }

        .login-success .login-welcome {
            transform: translateY(85px);
            -webkit-transform: translateY(85px);
            -ms-transform: translateY(85px);
        }
        .login-error{
            color: red;
            font-size: 0.8em;
            display: none;
        }*/
    html body {
        margin: 0;
        padding: 0;
        font-family: 'Microsoft YaHei', 'Microsoft YaHei';
        font-size: 1em;
        font-weight: normal;
        box-sizing: border-box;
    }

    body ::-webkit-input-placeholder {
        font-family: 'Microsoft YaHei', 'Microsoft YaHei';
        color: white;
        font-weight: normal;
    }

    body :-moz-placeholder {
        font-family: 'Microsoft YaHei', 'Microsoft YaHei';
        color: white;
        font-weight: normal;
    }

    body ::-moz-placeholder {
        font-family: 'Microsoft YaHei', 'Microsoft YaHei';
        color: white;
        font-weight: normal;
    }
    .login-container{
        background: url(/images/login-bg-2.jpg) no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .login-content{
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.4);
    }
    .login-header{
        width: 100%;
        text-align: right;
        box-sizing: border-box;
        padding: 15px 15px;
    }
    .login-header img{
        width: 260px;
        height: auto;
    }
    .login-body{
        display: flex;
        box-sizing: border-box;
        /*padding: 30px 30px;*/
        width: 1200px;
        margin: 0 auto;
    }
    .login-left{
        width: 50%;
        transition: width 1s;
        -moz-transition: width 1s; /* Firefox 4 */
        -webkit-transition: width 2s; /* Safari 和 Chrome */
        -o-transition: width 1s; /* Opera */
    }
    .login-logo{
        width: 100%;
        text-align: center;
    }
    .login-logo img{
        width: 50%;
        transition: width 1s;
        -moz-transition: width 1s; /* Firefox 4 */
        -webkit-transition: width 1s; /* Safari 和 Chrome */
        -o-transition: width 1s; /* Opera */
    }
    .login-slogan{
        text-align: center;
        width: 100%;
        font-size: 2.2em;
        padding: 15px 0;
    }
    .login-code{
        width: 100%;
        text-align: center;
        padding: 15px 0;
    }
    .login-code img{
        width: 30%;
        height: auto;
        transition: width 1s;
        -moz-transition: width 1s; /* Firefox 4 */
        -webkit-transition: width 1s; /* Safari 和 Chrome */
        -o-transition: width 1s; /* Opera */
    }

    .login-right{
        width: 50%;
        position: relative;
        transition: width 1s;
        -moz-transition: width 1s; /* Firefox 4 */
        -webkit-transition: width 1s; /* Safari 和 Chrome */
        -o-transition: width 1s; /* Opera */
    }




    .login-form {
        width: 70%;
        height: 180px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    .login-input {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.2);
        width: 75%;
        border-radius: 3px;
        padding: 10px 15px;
        margin: 0 auto 10px auto;
        display: block;
        text-align: center;
        font-size: 1.1em;
        color: #000000;
        -webkit-transition-duration: 0.25s;
        transition-duration: 0.25s;
        font-weight: normal;
    }

    .login-input:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }

    .login-input:focus {
        background-color: white;
        width: 80%;
        color: #f59075;
    }

    .login-submit {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        background-color: white;
        border: 0;
        padding: 10px 15px;
        color: #f59075;
        border-radius: 3px;
        margin: 0 auto 10px auto;
        width: 75%;
        display: block;
        cursor: pointer;
        font-size: 1.1em;
        -webkit-transition-duration: 0.25s;
        transition-duration: 0.25s;
    }

    .login-submit:hover {
        background-color: #f5f7f9;
    }

    .login-submit:focus ~ .to-be-changed {
        color: red;
    }
    .login-welcome {
        display: none;
        font-size: 2.5em;
        color: #fff;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-timing-function: ease-in-put;
        transition-timing-function: ease-in-put;
        font-weight: normal;
        padding: 15px;
    }
    .login-success .login-left {
        /*width: 100%;*/
    }
    /*.login-success .login-logo img{
        width: 30%;
    }
    .login-success .login-code img{
        width: 10%;
    }*/
    .login-success .login-right {
        /*width: 0;*/

        /*transform: translateY(85px);
        -webkit-transform: translateY(85px);
        -ms-transform: translateY(85px);*/
    }
    .login-error{
        color: #ec5d37;
        text-align: center;
        font-size: 0.8em;
        display: none;
    }
</style>
<body>
<div class="login-container">
    <div class="login-content">
        <div class="login-header">
            <img src="/images/login-login-1.png">
        </div>
        <div class="login-body">
            <div class="login-left">
                <div class="login-logo">
                    <img src="/images/login-logo.png">
                </div>
                <div class="login-slogan">
                    华成保险 为您保驾护航
                </div>
                <div class="login-code">
                    <img src="/images/login-code.png">
                </div>
            </div>
            <div class="login-right">
                <form class="login-form">
                    <input id="username" type="text" class="login-input" name="username"
                           placeholder="用户名">
                    <input id="password" type="password" class="login-input"
                           name="password" placeholder="口令">
                    <input type="submit" value="登录" class="login-submit">
                    <div class="login-error"></div>
                </form>

            </div>
        </div>
    </div>
</div>


<!-- <div class="login-container">
    <div class="login-content">
        <div class="login-welcome">
            <img src="/images/login-title.png" style="width: 12em">
        </div>
        <form class="login-form">
            <input id="username" type="text" class="login-input" name="username"
                   placeholder="用户名">
            <input id="password" type="password" class="login-input"
                   name="password" placeholder="口令">
            <input type="submit" value="登录" class="login-submit">
        </form>
        <div class="login-error"></div>
    </div>

    <ul class="login-cover">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div> -->


<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
    var AUTH = require('AUTH');
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }


    $('.login-form').submit(function (event) {
        event.preventDefault();

        $('.login-container').addClass('login-success');
        var lock_fade = false;
        var lock_read = false;
        $('.login-form').fadeOut(600,function(){
            lock_fade = true;
            login();
        });

        function login(){
            if(lock_fade && lock_read){
                var uri = getParameterByName("uri") || '/';
                window.location.href = decodeURIComponent(uri);
            }
        }

        $.post('/gettoken', {
                    username: $('#username').val(),
                    password: $('#password').val()
                }, function (token) {
                    AUTH.setToken(token);
                    lock_read = true;
                    $('.login-error').fadeOut(250);
                    login();
                }, 'text'
        ).fail(function (error) {
                    console.log(error);
                    function error_handle(msg){
//                document.querySelector('.login-container').innerHTML = msg;
                        $('.login-container').removeClass('login-success');
                        $('.login-error').text(msg);
                    }
                    var err;
                    try{
                        err = (JSON.parse(error));
                        if ( err.code == 403003) {
                            error_handle('用户名或密码错误');
                        }
                    }catch (e){
                        error_handle(error.responseText);
                    }
                    $('.login-form').fadeIn(600);
                    $('.login-error').fadeIn(500);
                });
    });
</script>

</body>
</html>
